<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <title>Vue入门演示</title>
</head>
<body>
    <div id="app">{{name}}  {{age}}
        <button type="button" @click="addAge()">增加</button>

        <p v-if="flag">今天不放假</p>
        <p v-else-if="flag">明天不放假</p>
        <p v-else>后天不放假</p>

        <ul>
            <li v-for="(temp, i) in arrays" :key="i">索引为:{{i}}, 数据为:{{temp}}</li>
        </ul>

        <ul>
            <li v-for="student in students">
                <span v-for="(v, k, i) in student">索引:{{i}}, key:{{k}}, value:{{v}}</span>
            </li>

        </ul>

        <input type="text" v-model="name">
        {{name}}
        <br>

        请输入跳转的路径:<input type="text" v-model="jump">
        <a v-bind:href="jump">跳转</a>
    </div>

<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            jump: "http://www.baidu.com",
            name: "青龙",
            age: 18,
            sex: "男",
            flag: false,
            arrays: [1,3,5, 7, 9, 2, 4, 6, 8],
            students:[
                {
                    name: "白虎",
                    age: 888,
                    sex: "女"
                },
                {
                    name: "朱雀",
                    age: 999,
                    sex: "女"
                },
                {
                    name: "玄武",
                    age: 888,
                    sex: "男"
                }
            ]
        },
        methods:{
            addAge:function() {
                this.age = this.age + 1;
                return ;
            }
        }
    });
</script>
</body>
</html>